import {Layout} from '@/components/Layout'
import {useTicketStore} from '@/store/ticketStore'
import {CheckCircle, Clock} from 'lucide-react'
import {Button} from '@/components/ui/button'
import {QrCode} from 'lucide-react'
import {ROUTE_PATHS} from "@/routs/routes.ts";
import {useNavigate} from 'react-router-dom'

export const TicketPage = () => {
    const {
        checkReservation,
        ticketRecords,
        toggleReservationCheck,
    } = useTicketStore()


    const navigate = useNavigate()


    const goQRPage = () => {
        navigate(ROUTE_PATHS.QR_SCANNER)
    }

    return (
        <Layout>
            <div className="space-y-4">
                <div className="sticky top-0 z-10 bg-white p-4">
                    {/* 预约状态切换 */}
                    <div className="bg-purple-50 rounded-lg p-4">
                        <div className="flex items-center justify-between">
                            <span className="text-gray-700">是否校验预约状态</span>
                            <div className="flex items-center">
                <span className="mr-2 text-sm text-gray-600">
                    {checkReservation ? '是' : '否'}
                </span>
                                <button
                                    onClick={toggleReservationCheck}
                                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                                        checkReservation ? 'bg-purple-600' : 'bg-gray-300'
                                    }`}
                                >
                    <span
                        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                            checkReservation ? 'translate-x-6' : 'translate-x-1'
                        }`}
                    />
                                </button>
                            </div>
                        </div>
                    </div>

                    {/* 扫码验票 */}
                    <div className="mt-4">
                        <Button className="w-full h-12" onClick={goQRPage}><QrCode
                            size={24}/><span>扫码验票</span></Button>
                    </div>
                </div>

                {/* 验票记录 */}
                <div className="space-y-3">
                    {ticketRecords.map((record) => (
                        <div key={record.id} className="bg-white rounded-lg p-4 shadow-sm">
                            <div className="flex items-start space-x-3">
                                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                                    record.status === 'success' ? 'bg-green-100' : 'bg-red-100'
                                }`}>
                                    <CheckCircle
                                        size={20}
                                        className={record.status === 'success' ? 'text-green-600' : 'text-red-600'}
                                    />
                                </div>
                                <div className="flex-1">
                                    <h3 className="font-medium text-gray-900">
                                        {record.status === 'success' ? '验票成功' : '验票失败'}
                                    </h3>
                                    <p className="text-sm text-gray-600 mt-1">
                                        UPN: {record.upn}
                                    </p>
                                    <div className="flex items-center mt-2 text-xs text-gray-500">
                                        <Clock size={12} className="mr-1"/>
                                        {record.time}
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>


            </div>
        </Layout>
    )
}

